<template>
  <user-search ref="searchRef" style="margin-bottom: 12px" @search="reload" />
  <!-- 表格 -->
  <ele-pro-table
    ref="tableRef"
    row-key="userId"
    :columns="columns"
    :datasource="datasource"
    :show-overflow-tooltip="true"
    v-model:selections="selections"
    highlight-current-row
    :export-config="{ fileName: '用户数据' }"
    :footer-style="{ paddingBottom: '16px' }"
    :tableStyle="{
      backgroundColor: '#fff',
      borderRadius: '8px'
    }"
    cache-key="systemUserTable"
  >
    <template #toolbar>
      <div>
        <el-button
          type="primary"
          class="ele-btn-icon"
          :icon="PlusOutlined"
          v-permission="'system:post:add'"
          @click="openEdit()"
        >
          新建
        </el-button>
        <el-button
          type="danger"
          class="ele-btn-icon"
          :icon="DeleteOutlined"
          v-permission="'system:post:remove'"
          @click="removeBatch()"
        >
          删除
        </el-button>
      </div>
    </template>

    <!-- 插槽写法 -->
    <template #proName="{ row, $index }">
      {{ row.proName }}
    </template>

    <template #status="{ row, $index }">
      <el-switch
        v-model="value3"
        inline-prompt
        active-text="正常"
        inactive-text="停用"
      />
    </template>

    <template #object="{ row, $index }">
      <div>
        <p>{{ row.object }}</p>
        <p>{{ row.objectCode }}</p>
      </div>
    </template>

    <!-- 操作列 -->
    <template #action="{ row, $index }">
      <el-space>
        <el-link
          type="primary"
          :underline="false"
          @click="openEdit(row)"
          icon="Edit"
          >修改
        </el-link>

        <el-divider direction="vertical" style="margin: 0" />
        <el-popconfirm
          :width="190"
          title="确定要删除此用户吗？"
          placement="top-end"
          @confirm="remove(row)"
        >
          <template #reference>
            <el-link icon="Delete" type="danger" :underline="false"
              >删除
            </el-link>
          </template>
        </el-popconfirm>
      </el-space>
    </template>
  </ele-pro-table>
  <!-- 编辑弹窗 -->
  <user-edit
    :data="current"
    v-model="showEdit"
    :dept-id="deptId"
    @done="reload"
  />
</template>

<script setup>
  import { ref, watch, computed } from 'vue';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import { DownloadOutlined } from '@/components/icons';
  import UserSearch from './user-search.vue';
  import UserEdit from './user-edit.vue';

  const props = defineProps({
    /** 部门id */
    deptId: Number
  });

  /** 搜索栏实例 */
  const searchRef = ref(null);

  /** 表格实例 */
  const tableRef = ref(null);

  // 暂时放在这里

  const value3 = ref(true);
  /** 表格列配置 */
  const columns = computed(() => {
    return [
      {
        type: 'selection',
        columnKey: 'selection',
        width: 48,
        align: 'center',
        fixed: 'left'
      },
      {
        type: 'index',
        columnKey: 'index',
        label: '序号',
        width: 60,
        align: 'center'
        // fixed: 'left'
      },
      {
        prop: 'proName',
        label: '路线名称',
        align: 'left',
        minWidth: 220,
        slot: 'proName'
      },
      {
        prop: 'proAdd',
        label: '路线描述',
        align: 'center',
        width: 110
      },
      {
        prop: 'optionObj',
        label: '巡检类型',
        align: 'center',
        minWidth: 100
      },
      {
        prop: 'objInfo',
        label: '巡检区域',
        align: 'center',
        minWidth: 110
      },
      {
        prop: 'remark',
        label: '所属部门',
        align: 'center',
        minWidth: 110
      },
      {
        prop: 'createTime',
        label: '巡检方式',
        align: 'center',
        width: 90
      },
      {
        prop: 'object',
        label: '执行对象',
        align: 'center',
        slot: 'object',
        width: 90
      },
      {
        label: '设备状态',
        align: 'center',
        prop: 'status',
        slot: 'status',
        width: 90
      },
      {
        columnKey: 'action',
        label: '操作',
        width: 180,
        align: 'center',
        slot: 'action',
        hideInPrint: true,
        hideInExport: true
      }
    ];
  });

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 表格数据源 */
  const datasource = () => {
    let data = new Promise((resolve) => {
      resolve([
        {
          id: 0,
          proName: 'XXXX路线',
          proAdd: '描述内容',
          optionObj: '日常巡检',
          objInfo: '配电间',
          remark: '所属部门',
          createTime: '机器人',
          object: '机器人',
          objectCode: 'S10086'
        }
      ]);
    });
    return data;
  };

  /** 搜索 */
  const reload = (where) => {
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 打开编辑弹窗 */
  const openEdit = (row) => {
    current.value = row ?? null;
    showEdit.value = true;
  };
  /** 导出数据 */
  const exportData = () => {
    const loading = EleMessage.loading({
      message: '请求中..',
      plain: true
    });
    tableRef.value?.fetch?.(({ where, orders, filters }) => {
      // exportUsers({ ...where, ...orders, ...filters })
      //   .then(() => {
      //     loading.close();
      //   })
      //   .catch((e) => {
      //     loading.close();
      //     EleMessage.error(e.message);
      //   });
    });
  };

  // 监听机构 id 变化
  watch(
    () => props.deptId,
    () => {
      searchRef.value?.resetFields?.();
      reload({});
    }
  );
</script>

<style lang="scss"></style>
